<template>
    <div id="main" ref="chart"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chart = ref();

onMounted(() => {
    const myChart = echarts.init(chart.value);
    const BASE_TIME = '2025-02-28 0:00:00';
    const ydata = [];
    const data = [820, 932, 901, 934, 1290, 1330, 1320];
    for (let i = 0; i < data.length; i++) {
        ydata.push([BASE_TIME, data[i]]);
    }
    console.log(ydata, '======');
    const option = {
        xAxis: [
            {
                type: 'category', // 坐标轴类型为类目型
                data: [
                    'ORE BERTH',
                    'BERTH 1',
                    'BERTH 2',
                    'BERTH 3',
                    'BERTH 4',
                    'BERTH 5',
                    'BERTH 6',
                    'BERTH 7',
                    'BERTH 8',
                    'BERTH 9',
                    'BERTH 10',
                    'BERTH 11',
                ],
                axisTick: {
                    inside: true, //刻度标签是否朝内，默认朝外。
                    // alignWithLabel: true, //刻度文字居中
                    // customValues: [0, 324, 205, 205, 205, 205, 205, 155, 155, 144, 142, 124, 200],
                },
            },
            {
                position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
                offset: 25, // 向下偏移，使分组文字显示位置不与原x轴重叠
                // axisLine: {
                //   show: false // 隐藏分组x轴的轴线
                // },
                axisTick: {
                    length: -35, // 延长刻度线做分组线
                    inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
                    lineStyle: { color: '#000' }, // 非必须，仅为了演示，明显标示出分组刻度线
                    // interval: function(index, value) {
                    //   return index === 0 || index === 2 || index === 5; // 在0、5、6处各画一条刻度线
                    // }
                    // interval: 1,
                },
                // min: -30,
                // max: 12,
                // interval: 1,
                // axisLabel: {
                //     inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
                //     interval: 0, // 强制显示全部刻度名
                // },
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            {
                position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部s
                offset: 60, // 向下偏移，使分组文字显示位置不与原x轴重叠
                max: 12,
                interval: Math.ceil(12) / 12,
                axisTick: {
                    length: 0, // 延长刻度线做分组线
                    inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
                    lineStyle: { color: '#000' }, // 非必须，仅为了演示，明显标示出分组刻度线
                },
                axisLabel: {
                    inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
                    interval: 0, // 强制显示全部刻度名
                },
                data: [],
            },
        ],
        yAxis: {
            type: 'time', // 坐标轴类型为数值型
            min: `2025-02-28 0:00:00`,
            max: `2025-02-28 23:59:59`,
        },
        series: [
            {
                data: data,
                type: 'bar',
            },
        ],
    };
    myChart.setOption(option);
});
</script>
<style lang="less" scoped>
#main {
    height: 500px;
}
</style>
